<template>
  <el-container>
    <MenuSelect @openDialog="openDialog" @refreshList='parent' :selections='menuIds' :sendPage='page' @sendSelectMenu='sendSelectMenu' @menuAllList='menuAllList'/>
    <MenuTable ref="refresh" @page="getPage"  :menu='menu' @openUpdateDialog='openUpdateDialog'
    @handleSelections='handleSelections'
     :selectMenu='selectMenu'/>
    <MenuInsert v-if="flag" @closeDialog='closeDialog' @refreshList='parent'/>
    <MenuUpdate v-if="updateFlag" :sendMenu='menuRow' @refreshMenu='parent' @closeDialog='closeDialog'/>
  </el-container>
</template>
<script>
import MenuSelect from "./menu/MenuSelect";
import MenuTable from "./menu/MenuTable";
import MenuInsert from "./menu/MenuInsert";
import MenuUpdate from './menu/menuUpdate'
export default {
  components: {
    MenuSelect,
    MenuTable,
    MenuInsert,
    MenuUpdate
  },
  data() {
    return {
      flag: false,
      updateFlag:false,
      selectMenu:{},
      page:{},
      menus:[],
      menu:{},
      menuRow:{},
      menuIds:[]
    };
  },
  methods: {
    openUpdateDialog(val,flag){
      // console.log(val)
      this.menuRow=val
      this.updateFlag=flag
    },
    openDialog(val) {
      // console.log(val)
      this.flag = val;
    },
    closeDialog(val){
        this.flag=val;
        this.updateFlag=val
    },
    parent(){
      this.$refs.refresh.menuList();
    },
    getPage(val){
      this.page=val;
    },
    menuAllList(val){
      this.menu=val
    },
    sendSelectMenu(val){
      // console.log(val)
     this.selectMenu=val
    },
    handleSelections(val){
        this.menuIds=val
    }
  }
};
</script>
<style lang='less' scoped>
.el-container {
  height: 575px;
  display: flex;
  flex-direction: column;
  width: 1166px;
  // justify-content: space-between;
}
</style>